<template>
    <button 
      class="my-btn" 
      :class="{ 'my-btn--disabled': props.disabled }" 
      :disabled="props.disabled" 
      @click="handleClick"
    >
      <slot />
    </button>
  </template>
  
<script setup lang="ts">
// 组件名称
defineOptions({
  name: 'SButton'
})

// Props 定义
const props = defineProps({
  disabled: Boolean,
  type: {
    type: String,
    default: 'default',
    validator: (val: string) => 
      ['default', 'primary', 'danger'].includes(val)
  }
})

// 事件定义
const emit = defineEmits(['click'])

// 点击处理
const handleClick = () => {
  if (!props.disabled) {
    emit('click')
  }
}
  </script>
  
  <style scoped>
  .my-btn {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
  }
  .my-btn--disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  </style>
  